<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05.媒体查询</title>
    <style>
        /* 
         媒体查询：
            语法:
            @media 操作符 mediatype and (expressions) {
                CSS 代码...;
            }
            操作符 only 只是
                  not  不是
                  all    所有
            mediatype 媒体类型
                  screen  屏幕  
            and 连接词
            expressions： 表达式 
                 width pc端/布局视口 宽度 
                 device-width 移动端/理想视口 宽度
                 max-width
                 max-device-width
                 min-width 
                 min-device-width

                height pc端/布局视口 高度 
                 device-height 移动端/理想视口 高度
                 max-height
                 max-device-height
                 min-height 
                 min-device-height

          手机  超小屏幕  0 - 761    红色
          平板  小屏幕   761-992     黄色
          电脑  中等屏幕 992-1200    绿色
          电视  大屏幕   1200以上    蓝色
        
        */

        @media only screen and (min-device-width:1200px ) {
            body {
                background-color: blue;
            }

        }

        @media only screen and (min-device-width:992px ) and  (max-device-width:1200px ) {
            body {
                background-color: green;
            }

        }


        @media only screen and (min-device-width:761px ) and  (max-device-width:992px ) {
            body {
                background-color: yellow;
            }

        }

        @media only screen and (max-device-width:761px) {
            body {
                background-color: red;
            }

        }
      
       
    </style>
</head>
<body>
    
</body>
</html>